<template>
    <view class="cus-select">
        <slot :data="{showValue}">
          <u-cell-item :value="showValue || placeholder" :arrow="true" @click="show = true"></u-cell-item>
        </slot>
        <u-picker mode="time" v-model="show" :params="timeParams" @confirm="confirm" :default-time="defaultTime"></u-picker>
    </view>
</template>

<script lang="ts" setup>
import { ref,defineProps, defineEmits, computed } from 'vue'
import dayjs from 'dayjs'
interface DefaultProps {
    label: string,
    value: string
}
const props = defineProps({
    value: {
        type: [String, Number],
        default: ''
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    timeParams: {
        type: Object,
        default: () => ({
            year: true,
            month: true,
            day: true,
            hour: false,
            minute: false,
            second: false,
        })
    }
})
const emit = defineEmits(['update:value', 'change'])
const show = ref(false)
const showValue = computed({
  get() {
    console.log(props.value)
    return props.value
  },
  set(value:any) {
    emit('change', value)
  }
})
const defaultTime = computed(() => {
    let date:any = ''
    if (!showValue.value) {
        date = dayjs().format('YYYY-MM-DD HH:mm:ss')
    } else {
        date = showValue.value
    }
    console.log(date)
    // return {
    //     year: dayjs(date).year(),
    //     month: dayjs(date).month(),
    //     day: dayjs(date).day(),
    //     hour: dayjs(date).hour(),
    //     minute: dayjs(date).minute(),
    //     second: dayjs(date).second()
    // }
    return date
})
const confirm = (data:any) => {
    console.log(data)
    const value = `${props.timeParams.year ? data.year+'-' : dayjs().year()+'-'}${props.timeParams.month ? data.month+'-' : ''}${props.timeParams.day ? data.day : ''} ${props.timeParams.hour ? (data.hour+(data.minute? ':':':00')) : ''}${props.timeParams.minute ? data.minute+(data.second?':':'') : ''}${props.timeParams.second ? data.second+':' : ''}`
    emit('update:value', value)
    emit('change', value)
}
</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<style lang="scss">
.cus-select{
  width: 100%;
  .u-border-bottom:after{
    border:none
  }
  .u-cell{
    padding: 0;
  }
}
</style>

